<template lang="pug">
  .page
    .AccountsReceivableManage
      .search-form.mb-10.pl-10.pr-10
        Form.ivu-row(ref="formData" :model="formData" :label-width="150")
          FormItem.form-item.ivu-col.pr-20.mb-15(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
            template(v-if="item.type === 'select'")
              Select(v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
                Option(
                  v-for="(c_item, index) in arrListDown[item.options]"
                  :value="c_item.key"
                  :key="index"
                ) {{ c_item.value }}
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder" clearable)
            template(v-if="item.type === 'interval'")
              DatePicker.pull-left.interval-date-140(v-model="formData[item.model1]" :value="datePickerDefault" :placeholder="item.placeholder1" @on-change="handleChangeDatePicker")
              span.pl-10.pr-10.pull-left.line-h-32 --
              DatePicker.pull-left.interval-date-140(v-model="formData[item.model2]" :value="datePickerDefault" :placeholder="item.placeholder2" @on-change="handleChangeDatePicker")
            template(v-if="item.type === 'monthInterval'")
              DatePicker.pull-left.interval-date-140(v-model="formData[item.model1]" :value="datePickerDefault" :placeholder="item.placeholder1" type="month" @on-change="handleChangeDatePicker")
              //- span.pl-10.pr-10.pull-left.line-h-32 --
              //- DatePicker.pull-left.interval-date-140(v-model="formData[item.model2]" :value="datePickerDefault" :placeholder="item.placeholder2" type="month" @on-change="handleChangeDatePicker")
            template(v-if="item.type === 'button'")
              Button(v-if="hasFind" type="info" @click="searchFn") 查询
              

      .pl-20.pr-20.bg-white
        Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :stripe="true" ref="demoTable"
          @on-selection-change="handleOnSelectChange"
        )
          .clearfix.pr-24.pl-12.overflow-hidden(slot="header")
            .table-title-lefttxt.pull-left
              |合计
              span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
              |条
            .pull-right.table-title-btns
              Button.mr-10( type="info" @click="exportPFPayableBill") 导出
              Button(v-if="hasExportPayment" type="info" @click="exportPayment") 导出付款单
          .clearfix.pl-20.pr-20(slot="footer")
            Page(
              :total="tableComone.totalRows"
              @on-change="onChangePage"
              @on-page-size-change="onpageSizeChange"
              show-sizer
              show-total
              placement="top"
              prev-text="上一页"
              next-text="下一页"
              :page-size-opts="[10, 20, 30, 50, 100]"
            )
          template(slot-scope="{ row, index }" slot="action")
            Button.mr-10(type="text" size="small" @click="handleDownLoadPayAttachmen(row)" :disabled="!(row.annexPath)") 付款反馈下载

    //- 导出前弹窗
    //- ExportModal(ref="ExportModal" @query="query")

</template>

<script>
import { FinancePaymentDetailsApi } from "@/api/FinancePaymentDetails.api.js";
import { FinanceSSPayableApi } from "@/api/FinanceSSPayable.api.js";
import { ProvidentFundThead } from "./tableHead.js";
import _cloneDeep from "clone-deep";
import { EmployeesApi } from "@/api/Employees.api.js";
// import ExportModal from "../pfApply/modal/exportModal"
import dataApi from "@/api/data.js";
import moment from 'moment'

export default {
  name: "paymentDetail",

  components: {
    // ExportModal,
  },

  data() {
    return {
      thead: _cloneDeep(ProvidentFundThead),
      tableData: [],
      formData: {
        PayableType: null,
        PayBank: null,
        PeriodMonth: new Date(),
        BeginTime: null,
        EndTime: null,
      },
      formItem: [
        {
          type: "select",
          label: "付款类型",
          placeholder: "请选择付款类型",
          prop: "PayableType",
          model: "PayableType",
          options: "payTypes",
          style:
            "ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-8",
        },
        {
          type: "select",
          label: "付款银行",
          placeholder: "请选择付款银行",
          prop: "PayBank",
          model: "PayBank",
          options: "payBanks",
          style:
            "ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-8",
        },
        {
          type: "interval",
          label: "付款时间",
          placeholder1: "开始日期",
          prop1: "BeginTime",
          model1: "BeginTime",
          placeholder2: "结束日期",
          prop2: "EndTime",
          model2: "EndTime",
          style:
            "ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-8",
        },
        {
          type: "monthInterval",
          label: "费用月份",
          placeholder1: "请选择费用月份",
          prop1: "PeriodMonth",
          model1: "PeriodMonth",
          style:
            "ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-8",
        },
        {
          type: "button",
          style:
            "ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-8",
        },
      ],
      selectedEmployeeId: [], // 勾选的id集合,array格式
      selectedEmployeeArr: [], // 勾选的id, name数组集合
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 10, // 当前页面展示条数
      },
      downLoadRul: "",
      arrListDown: {
        payTypes: [],
        payBanks: [],
      },
      datePickerDefault: new Date(), // 当前时间
      importExcel: {
        uploadLoading: false,
        progressPercent: 0,
        showProgress: false,
        showRemoveFile: false,
        file: null,
      },
    };
  },
  computed: {
    actionArr() {
      let arr = this.$store.state.user.actionAccess.map((item) => {
        return item.code;
      });
      return arr;
    },
    // 查询
    hasFind() {
      return this.actionArr.indexOf("Find") > -1;
    },
    // 导出
    hasExport() {
      return this.actionArr.indexOf("Export") > -1;
    },
    // 导出付款单
    hasExportPayment() {
      return this.actionArr.indexOf("ExportPayment") > -1;
    },
  },

  mounted() {
    this.query();
    this.getPayBanks();
    this.getPayTypes();
  },

  methods: {
    // 搜索
    searchFn() {
      this.tableComone.pageIndex = 1;
      this.query();
    },
    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage(val) {
      this.tableComone.pageIndex = val;
      this.query();
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange(val) {
      this.tableComone.pageIndex = 1;
      this.tableComone.pageSize = val;
      this.query();
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query() {
      this.formData.BeginTime = this.formData.BeginTime
        ? moment(this.formData.BeginTime).format("YYYY-MM-DD")
        : "";
      this.formData.EndTime = this.formData.EndTime
        ? moment(this.formData.EndTime).format("YYYY-MM-DD")
        : "";
      var params = {
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize,
      };
      let res = await FinancePaymentDetailsApi.financePaymentDetailsGetList({
        ...params,
        ...this.formData,
      });
      console.log("付款明细res: ", res);
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data;
        this.tableComone.totalRows = res.data.totalRows;
      } else {
        this.tableData = [];
      }
      this.loading = false;
    },

    getPayBanks() {
      FinancePaymentDetailsApi.getPayBanks({HasPaging: false}).then((res) => {
        this.arrListDown.payBanks = res.data.data.map(el => ({value: el.bankName, key: el.bankName}));
      });
    },
    getPayTypes() {
      FinancePaymentDetailsApi.getPayTypes().then((res) => {
        console.log(res, 191);
        res.data.forEach((el) => {
          if (el.group === "payablebills.payabletype") {
            this.arrListDown.payTypes = el.items.map(el => ({value: el.value, key: el.key}));
          }
        });
      });
    },

    // 表格选择操作
    handleOnSelectChange(value) {
      this.selectedEmployeeArr = value.map((item) => {
        return { id: item.id, name: item.name };
      });
      this.selectedEmployeeId = value.map((item) => {
        return item.id;
      });
      console.log("列表勾选数组1", this.selectedEmployeeArr);
      console.log("列表勾选数组2", this.selectedEmployeeId);
    },

    // 日期选择
    handleChangeDatePicker(val) {
      console.log("val: ", val);
    },

    // 导出
    async exportPFPayableBill() {
      this.formData.BeginTime = this.formData.BeginTime
        ? moment(this.formData.BeginTime).format("YYYY-MM-DD")
        : "";
      this.formData.EndTime = this.formData.EndTime
        ? moment(this.formData.EndTime).format("YYYY-MM-DD")
        : "";

      var params = {
        IDs: this.selectedEmployeeId,
        // HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize,
        ...this.formData,
      };
      console.log("params: ", params);
      let res = await FinancePaymentDetailsApi.financePaymentDetailsExport(
        params
      );
      console.log("导出实付单-U8 res: ", res);
      if (res.status === 200 && res.data.success) {
        console.log("返回链接: ", res.data.message);
        window.open(baseUrl + res.data.message, "_blank");
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true,
        });
      }
    },
    // 导出付款单
    async exportPayment () {
      FinancePaymentDetailsApi.exportPayment({...this.formData}).then(resp => {
        console.log('导出付款单resp: ', resp)
        if (resp.status == 200 && resp.data.success) {
          console.log('返回链接: ', resp.data.message)
          window.open(resp.data.message, '_blank')
        } else {
          this.$Message.error(resp.data.message)
        }
      })
    },

    // 付款反馈下载
    handleDownLoadPayAttachmen (row) {
      if (row.annexPath) {
        let str = row.annexPath
        console.log('付款反馈下载: ', str.substring(str.indexOf('\Content') - 1))
        let path = str.substring(str.indexOf('\Content') - 1)
        window.open(path, '_blank')
      } else {
        this.$Message.warning({
          content: '不能下载',
          duration: 10,
          closable: true
        })
      }
    },
  }, // methods end
};
</script>

<style lang="less" scoped>
</style>
